<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件下载</title>
    <style>
        body {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 使body的高度等于视口的高度 */
            margin: 0; /* 移除默认的外边距 */
            background: black
        }
        input{
            border: none;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="fileName" placeholder="输入文件名(含文件后缀)" style="width: 500px">
    <hr>
    <div>
        <button onclick="reset()">清空输入</button>
        <button onclick="downloadFile()" style="background: #00bcd4">确定下载</button>
    </div>
</div>
<div>
</div>
<script>
    function reset() {
        document.getElementById('fileName').value = '';
    }

    function downloadFile() {
        const fileName = document.getElementById('fileName').value;
        if (!fileName) {
            alert('请输入文件名');
            return;
        }

        const url = `/api/file/download/${encodeURIComponent(fileName)}`;

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('文件下载失败');
                }
                return response.blob();
            })
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                console.error('Error:', error);
                alert('文件下载错误！');
            });
    }
</script>
</body>
</html>